<template>
  <!-- 预约详情 -->
  <div class="appoint-detail">
    <Modal
      v-model="modalInfoShow"
      title="预约详情"
      @on-ok="okHandle"
      @on-cancel="cancelHandle"
      width="540"
    >
      <div class="appoint-content">
        <Title :titles="'预约信息'"></Title>
        <div class="info">
          <div class="base">
            <span>预约基地：</span>
            <span>{{ modelInfo.name }} {{ modelInfo.siteAddress || "" }}</span>
          </div>
          <div class="time">
            <span>预约时段：</span>
            <div>
              <p v-for="(item, index) in modelInfo.timeArr" :key="index">{{ item }}</p>
            </div>
          </div>
          <div class="user">
            <span>预约用户：</span>
            <span>{{ modelInfo.userName }}</span>
            <span
              style="
                padding: 1px 5px;
                color: #ffffff;
                background-color: #fd5151;
                margin-left: 10px;
              "
              >{{
                modelInfo.userType == "0"
                  ? "学生"
                  : modelInfo.userType == "1"
                  ? "教师"
                  : "社会人员"
              }}</span
            >
          </div>
          <div class="phone">
            <span>联系电话：</span>
            <span>{{ modelInfo.mobile }}</span>
          </div>
          <div class="unit">
            <span>用户单位：</span>
            <span>{{ modelInfo.memberSite }}</span>
          </div>
        </div>
        <Title :titles="'支付信息'" :top="30"></Title>
        <div class="pay-info">
          <div class="time">
            <span>下单时间：</span>
            <span>{{ modelInfo.createTime }}</span>
          </div>
          <div class="way">
            <span>支付方式：</span>
            <span>{{paymentMethod}}</span>
          </div>
          <div class="way">
            <span>支付时间：</span>
            <span>{{ modelInfo.paymentTime }}</span>
          </div>
          <div class="price">
            <span>收费金额：</span>
            <span v-if="modelInfo.price">
              <span>￥</span>
              <span>{{modelInfo.price}}</span>
              <span>已支付</span>
            </span>
            <span v-else>免费</span>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import Title from "@/pages/online_consulting/title.vue";
export default {
  props: ["modelInfo", "modalInfoShow"],
  data() {
    return {};
  },
  computed:{
    paymentMethod(){
      if(this.modelInfo.paymentMethod){
        return this.modelInfo.paymentMethod=='ALIPAY'?'支付宝':'微信'
      }else{
        return '免费'
      }
    }
  },
  components: {
    Title,
  },
  methods: {
    okHandle() {},
    cancelHandle() {
      this.$emit("modalHandle");
    },
  },
};
</script>
<style lang="scss" scoped>
//预约详情弹窗
:deep(.ivu-modal-body) {
  padding: 0 16px;
}
:deep(.ivu-modal-header) {
  border: none;
}
:deep(.ivu-modal-footer) {
  display: none;
}
.appoint-content {
  padding-bottom: 44px;
  .info {
    .base,
    .time,
    .user,
    .phone,
    .unit {
      display: flex;
      margin-top: 12px;
      > span:first-of-type {
        color: #999999;
      }
    }
    .time {
      > div {
        display: flex;
        flex-direction: column;
        > span {
          margin-top: 12px;
        }
        > span:first-of-type {
          margin: 0;
        }
      }
    }
  }
  .pay-info {
    .time,
    .way {
      display: flex;
      margin-top: 12px;
      color: #999999;
    }
    .price {
      margin-top: 12px;
      > span:first-of-type {
        color: #fd5151;
      }
      > span:nth-of-type(2) {
        color: #fd5151;
      }
      > span:nth-of-type(3) {
        color: #fd5151;
        font-size: 20px;
      }
      > span:last-of-type {
        color: #79c89b;
        margin-left: 12px;
      }
    }
  }
}
</style>
